<script setup lang="ts">
import { useTransition, TransitionPresets } from "@vueuse/core";
import { getBillEntityPage } from "@/api/billEntity";
import { BillEntityPageQuery, BillEntityPageVO } from "@/api/billEntity/types";
import BillCard from "./components/BillCard.vue";

defineOptions({
  // eslint-disable-next-line
  name: "Dashboard",
  inheritAttrs: false,
});

const duration = 1000;

const hlAmount = ref(0);
const hlAmountOutput = useTransition(hlAmount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
hlAmount.value = 0;

const wwAmount = ref(0);
const wwAmountOutput = useTransition(wwAmount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
wwAmount.value = 0;

const queryParams = reactive<BillEntityPageQuery>({
  pageNum: 1,
  pageSize: -1,
  types: ["common"],
});

/** 查询 */
function handleQuery() {
  getBillEntityPage(queryParams)
    .then(({ data }) => {
      let tagNums: any = {};

      for (let index = 0; index < data.list.length; index++) {
        const element: BillEntityPageVO = data.list[index];
        const tags: string[] = element.tagNames
          ? element.tagNames.split(",")
          : [];
        const fromNum: number = element.fromNum ? element.fromNum : 0;
        const toNum: number = element.toNum ? element.toNum : 0;
        const differenceNum: number = toNum - fromNum;
        tags.forEach((tag) => {
          if (!tagNums[tag]) {
            tagNums[tag] = 0;
          }
          tagNums[tag] += differenceNum;
        });

        hlAmount.value = tagNums["HL"] ? tagNums["HL"] : 0;
        wwAmount.value = tagNums["WW"] ? tagNums["WW"] : 0;
      }
    })
    .finally(() => {});
}

onMounted(() => {
  handleQuery();
});
</script>

<template>
  <div class="dashboard-container">
    <!-- 数据卡片 -->
    <el-row :gutter="40" class="mb-4">
      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
        <BillCard icon="money" title="HL余额" :value="hlAmountOutput" />
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
        <BillCard icon="money" title="WW余额" :value="wwAmountOutput" />
      </el-col>
    </el-row>

    <!-- Echarts 图表 -->
    <el-row :gutter="40">
      <el-col :sm="24" :lg="24" class="mb-2">
        <BillMonthDetailChart
          id="lineChart1"
          height="500px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
          types="payout,debt"
          dataType="to"
          chartTitle="支出统计"
        />
      </el-col>
      <el-col :sm="24" :lg="24" class="mb-2">
        <BillMonthDetailChart
          id="lineChart2"
          height="500px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
          types="income,debt"
          dataType="from"
          chartTitle="收入统计"
        />
      </el-col>
      <el-col :sm="24" :lg="24" class="mb-2">
        <BillMonthDetailChart
          id="lineChart3"
          height="500px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
          types="common,debt"
          dataType="difference"
          chartTitle="内部结余"
        />
      </el-col>
      <el-col :sm="24" :lg="24" class="mb-2">
        <AllEntityBarChart
          id="barChart1"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
          types="income,debt"
          dataType="from"
          :isSort="true"
          chartTitle="收入"
        />
      </el-col>
      <el-col :sm="24" :lg="24" class="mb-2">
        <AllEntityBarChart
          id="barChart2"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
          types="payout,debt"
          dataType="to"
          :isSort="true"
          chartTitle="支出"
        />
      </el-col>
      <el-col :sm="24" :lg="24" class="mb-2">
        <AllEntityBarChart
          id="barChart3"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
          types="common,debt"
          dataType="difference"
          :isSort="true"
          chartTitle="内部账单"
        />
      </el-col>
      <!-- <el-col :sm="24" :lg="24" class="mb-2">
        <AllEntityBarChart
          id="barChart4"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
          types="debt"
          dataType="difference"
          :isSort="true"
          chartTitle="债务"
        />
      </el-col> -->
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}
</style>
